<template>
    <div>
        <!-- 拍卖页 -->
        <div id="header">
            <div class="container">
                <div :class="{cur:current=='daySale'}" @click="goDaySale">拍卖日程</div>
                <div :class="{cur:current=='SaleResult'}" @click="goSaleResult">拍卖结果</div>
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="mainer">
            <router-view/>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                current: this.$route.path.split('/').pop()
            }
        },
        methods:{
            goDaySale(){
                if(this.$route.path != '/home/sale/daySale') this.$router.push('/home/sale/daySale')
                this.current=this.$route.path.split('/').pop()
            },
            goSaleResult(){
                if(this.$route.path != '/home/sale/SaleResult') this.$router.push('/home/sale/SaleResult')
                this.current=this.$route.path.split('/').pop()
            }
        },
        watch:{
            $route(){
                this.current=this.$route.path.split('/').pop()
            }
        }
    }
</script>

<style lang="scss" scoped>
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1px solid #efeef3;
    z-index: 2;
    .container {
        display: flex;
        justify-content: center;
        margin: 20rpx auto;
        // 拍卖日程和拍卖结果
        >div {
            margin: 0 10px;
            padding: 10px 0px;
            color: #757f8e;
            font-family: '黑体';
            font-weight: bold;
            &.cur {
                color: #132031;
                border-bottom: 3px solid #a73743;
            }
        }
    }
}
// 主体部分
.mainer {
    margin-top: 38px;
    margin-bottom: 20px;
}
</style>